<template>
  <div>
    <div ref="myLine" style="width: 600px;height:400px;"></div>
  </div>
</template>
<script>
import equipmentdata from './equipmentdata'
let echarts = require("echarts/lib/echarts");
export default {
  name: "Fillinglineequipment",
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      let dom = this.$refs.myLine;
      let myLine = echarts.init(dom);
      myLine.setOption({
        textStyle: {
          color: "#fff"
        },
        title: {
          text: "填充线设备记录看板",
          x:'center',
            subtext:'',//_this.subtitle
            textStyle: {
              color: '#fff',
              fontSize:20,
              fontWeight: 'normal',
            },
            top: '10px',
            subtextStyle: {
              color: '#a0a0a0',
              fontSize: 15,
            },
        },
        tooltip: {},
        xAxis: {
          data: ["开机时间", "运行时间", "灌装时间"]
        },
        yAxis: [
          {
            type: "value",
            name: "时间/h",
            nameLocation: "end",
            min: 0,
            max: 20,
            interval: 5,
            nameTextStyle: {
              color: "#00ffff"
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#2d4359",
                width: 3
              },
              symbol: ["none", "arrow"]
            },
            axisTick: { show: false },
            splitLine: {
              show: true,
              interval: "auto",
              lineStyle: {
                color: ["#345871"],
                type: "dashed"
              }
            },
            axisLabel: {
              formatter: "{value}"
            }
          }
        ],
        series: [
          {
            name: "时间/h",
            type: "bar",
            data: [3, 4, 5],
            areaStyle: {
              color: "#00d687",
              origin: "auto",
              shadowBlur: "",
              shadowColor: "",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              opacity: "0.1"
            },
            itemStyle: {
              normal: {
                color: function(params) {
                  var colorList = [
                    "#3C72C4",
                    "#DD2292",
                    "#F79709",
                  ];
                  return colorList[params.dataIndex];
                }
              }
            }
          }
        ]
      });
    }
  }
};
</script>
<style scoped>
</style>
